import "./index.css";

export default function UserList(props) {
  /*
    第一次显示：输入用户名来搜索
    搜索中：显示loading    
    搜索完成：
      有数据     显示用户列表
      没有数据   显示暂无此用户数据
  */

  if (!props.hasSearch) {
    return <h1>输入用户名来搜索</h1>;
  }

  if (props.loading) {
    return <h1>loading....</h1>;
  }

  if (props.userList.length) {
    // 有用户数据
    return (
      <div className="row">
        {props.userList.map((user) => {
          return (
            <div className="card" key={user.id}>
              <a href={user.html_url} target="_blank" rel="noreferrer">
                <img
                  src={user.avatar_url}
                  alt={user.login}
                  style={{ width: 100 }}
                />
              </a>
              <p className="card-text">{user.login}</p>
            </div>
          );
        })}
      </div>
    );
  }

  return <h1>暂无用户数据</h1>;
}
